<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
             <el-form-item label="客户名称" prop="customername">
                <el-input v-model="queryParams.customername" placeholder="请输入客户名称"></el-input>
            </el-form-item>

            <el-form-item label="客户代号" prop="customerid">
                <el-input v-model="queryParams.customerid" placeholder="请输入客户代号" clearable @keyup.enter.native="handleQuery" />
              </el-form-item>
<!--             
              <el-form-item label="客户代号" prop="customerid">
              <el-input v-model="form.customerid" placeholder="请输入客户代号" />
            </el-form-item> -->
           
           <el-form-item label="客户类别" prop="type">
                       <el-select v-model="queryParams.type" placeholder="请选择客户类别">
                         <el-option label="代理部A区客户" value="代理部A区客户"></el-option>
                         <el-option label="代理部B区客户" value="代理部B区客户"></el-option>
                         <el-option label="英国代理客户" value="英国代理客户"></el-option>
                          <el-option label="日本代理客户" value="日本代理客户"></el-option>
                        </el-select>
                     </el-form-item>

              <el-form-item label="客户属性" prop="attribute">
              <el-select v-model="form.attribute" style="width: 240px;" :disabled="isEdit">
                <el-option value="内销" label="内销" />
                <el-option value="外销" label="外销" />

              </el-select>
              <!-- <el-input v-model="form.attribute" placeholder=" /> -->
            </el-form-item>
          

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>

        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
          </el-col>
          <!-- <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
              >修改</el-button>
            </el-col> -->
          <el-col :span="1.5">
            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
              @click="handleDelete">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-tooltip placement="top">
          <div slot="content">点击任意一行客户记录，则下方会显示此客户的报价明细</div>
          <el-table :data="orderdata" v-loading="loading" @row-click="showTab" :row-class-name="rowClassName">
            <el-table-column type="selection" width="55"></el-table-column>
             <el-table-column prop="customerid" align="center" label="客户代号" />
                <el-table-column prop="customername" align="center" label="客户名称" />
                <el-table-column prop="type" align="center" label="客户类别" />
                <el-table-column prop="areas" align="center" label="所属地区" />
                <el-table-column prop="attribute" align="center" label="属性" />
                <el-table-column prop="address" align="center" label="地址" />
                <el-table-column prop="response" align="center" label="负责人" />
                <el-table-column prop="CXRQ" align="center" label="促销日期" />
                <el-table-column prop="contacts" align="center" label="联系人" />
                <el-table-column prop="mobilePhone" align="center" label="手机" />
                <el-table-column prop="phone" align="center" label="电话" />
                <el-table-column prop="fax" align="center" label="传真" />

            <el-table-column label="操作" align="center" width="150px" fixed="right">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                
              </template>
            </el-table-column>
          </el-table>
        </el-tooltip>
        <el-dialog title="客户信息" :visible.sync="open" width="30%" center>
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="客户代号" prop="customerid">
              <el-input v-model="form.customerid" placeholder="请输入客户代号"></el-input>
            </el-form-item>
            <el-form-item label="客户名称" prop="customername">
              <el-input v-model="form.customername" placeholder="请输入客户名称"></el-input>
            </el-form-item>
            <el-form-item label="客户类别" prop="type">
               <el-select v-model="form.type" placeholder="请选择客户类别">
                   <el-option label="代理部A区客户" value="代理部A区客户"></el-option>
                   <el-option label="代理部B区客户" value="代理部B区客户"></el-option>
                   <el-option label="英国代理客户" value="英国代理客户"></el-option>
                  <el-option label="日本代理客户" value="日本代理客户"></el-option>
               </el-select>
             </el-form-item>
            <el-form-item label="客户所属地区" prop="areas">
              <el-input v-model="form.areas" placeholder="请输入客户所属地区"></el-input>
            </el-form-item>

             <el-form-item label="客户属性" prop="attribute">
              <el-select v-model="form.attribute" placeholder="请选择客户属性" style="width: 240px;" :disabled="isEdit">
                <el-option value="内销" label="内销" />
                <el-option value="外销" label="外销" />

              </el-select>
              <!-- <el-input v-model="form.attribute" placeholder=" /> -->
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入客户地址"></el-input>
            </el-form-item>
            <el-form-item label="负责人" prop="response">
              <!-- <el-datw-picker v-model="form.采购日期" type="date" placeholder="请输入采购日期"></el-datw-picker> -->
              <el-input v-model="form.response" placeholder="请输入客户负责人名称"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="contacts">
              <el-input v-model="form.contacts" placeholder="请输入客户联系人名称"></el-input>
            </el-form-item>
            <el-form-item label="客户联系手机" prop="mobilePhone">
              <el-input v-model="form.mobilePhone" placeholder="请输入客户联系手机号"></el-input>
            </el-form-item>
           
            <el-form-item label="客户电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入客户电话"></el-input>
            </el-form-item>

             <el-form-item label="传真" prop="fax">
              <el-input v-model="form.fax" placeholder="请输入传真号"></el-input>
            </el-form-item>
        
       
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>

          </div>
        </el-dialog>

        <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
          :total="total" />

        <el-tabs v-model="activeName" v-if="showCard">
          <el-tab-pane label="客户产品价格明细" name="first">
            <h2 align="center">{{ customername }} ---- 客户产品价格明细</h2>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddComm">新增明细</el-button>
              </el-col>
            </el-row>
            <el-table :data="detailedData" v-loading="loading">
              <el-table-column prop="id" label="序号" align="center" />
                    <el-table-column label="物品描述" align="center">
                        <el-table-column prop="itemid" label="代号" align="center" />
                        <el-table-column prop="name" label="名称" align="center" />
                        <el-table-column prop="size" label="规格" align="center" />
                        <el-table-column prop="company" label="单位" align="center" />
                    </el-table-column>

                    <el-table-column prop="attribute" label="属性" align="center" />
                    <el-table-column prop="colour" label="颜色" align="center" />
                    <el-table-column prop="barcode" label="条形码" align="center" />
                    <el-table-column prop="Factoryprice" label="出厂价" align="center" />
                    <el-table-column label="销售" align="center">
                        <el-table-column prop="costprice" align="center" label="不含税价" />
                        <el-table-column prop="tax" align="center" label="税率%" />
                        <el-table-column prop="taxprice" align="center" label="含税价" />
                    </el-table-column>
                    <el-table-column label="促销" align="center" >
                        <el-table-column prop="promotion" align="center" label="促销价" />
                        <el-table-column prop="promotionstart" align="center" label="促销开始日期" />
                        <el-table-column prop="promotionend" align="center" label="促销结束日期" />
                    </el-table-column>
                    <el-table-column align="center" label="装箱数">
                        <el-table-column prop="number1" align="center" label="内箱" />
                        <el-table-column prop="number2" align="center" label="外箱" />

                    </el-table-column>
                    <el-table-column align="center" label="规格">
                        <el-table-column prop="long" align="center" label="长" />
                        <el-table-column prop="high" align="center" label="高" />
                        <el-table-column prop="wide" align="center" label="宽" />
                    </el-table-column>
                    <el-table-column prop="volume" align="center" label="单位体积" />
                    <el-table-column prop="price" align="center" label="计价" />
                    <el-table-column prop="remark" align="center" label="备注" />
              <el-table-column prop="packages" label="操作" align="center" width="150px" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-edit"
                    @click="handleUpdateComm(scope.row)">修改</el-button>
                  <el-button size="mini" type="text" icon="el-icon-delete"
                    @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

        </el-tabs>
      </el-col>
    </el-row>
    <el-dialog :title="titleComm" :visible.sync="openComm" width="500px" append-to-body>
      <el-form :model="formComm" :rules="rulesComm" ref="formComm" label-width="100px">
        <el-form-item label="产品代号" prop="itemid">
          <el-input v-model="formComm.itemid" placeholder="请输入产品代号" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="formComm.name" placeholder="请输入产品名称" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="产品规格" prop="size">
          <el-input v-model="formComm.size" placeholder="请输入产品规格" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="单位" prop="company">
          <el-input v-model="formComm.company" placeholder="请输入产品单位" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="属性" prop="attribute">
          <el-input v-model="formComm.attribute" placeholder="请输入属性" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="条形码" prop="barcode">
          <el-input v-model="formComm.barcode" placeholder="请输入条形码" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="产品出厂价" prop="Factoryprice">
          <el-input v-model="formComm.Factoryprice" placeholder="请输入产品出厂价" style="width: 240px;" />
        </el-form-item>
        <!-- <el-form-item label="生产要求" prop="productionRequirements">
           <el-input type="textarea" resize="none" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.productionRequirements">
            </el-input>
         </el-form-item> -->
        <el-form-item label="不含税价" prop="costprice">
          <el-input v-model="formComm.costprice" placeholder="请输入不含税价" style="width: 240px;" />
          <!-- <el-input type="textarea" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.productionTechnique">
            </el-input> -->
        </el-form-item>
        <el-form-item label="税率%" prop="tax">
          <el-input v-model="formComm.tax" placeholder="请输入产品税率" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="含税价" prop="taxprice">
          <el-input v-model="formComm.taxprice" placeholder="请输入含税价" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="促销价" prop="promotion">
          <el-input v-model="formComm.promotion" placeholder="请输入促销价" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="促销开始日期" prop="promotionstart">
           <el-date-picker v-model="formComm.promotionstart" type="date" placeholder="请选择促销开始日期" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="促销结束日期" prop="promotionend">
           <el-date-picker v-model="formComm.promotionend" type="date" placeholder="请选择促销结束日期" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="内箱装箱数" prop="number1">
          <el-input v-model="formComm.number1" placeholder="请输入内箱装箱数" style="width: 240px;" />
        </el-form-item>
        <el-form-item label="外箱装箱数" prop="number2">
          <el-input v-model="formComm.number2" placeholder="请输入外箱装箱数" style="width: 240px;" />
        </el-form-item>
          <el-form-item label="长" prop="long">
          <el-input v-model="formComm.long" placeholder="请输入长度" style="width: 240px;" />
        </el-form-item>
          <el-form-item label="宽" prop="wide">
          <el-input v-model="formComm.wide" placeholder="请输入宽度" style="width: 240px;" />
        </el-form-item>
          <el-form-item label="高" prop="high">
          <el-input v-model="formComm.high" placeholder="请输入高度" style="width: 240px;" />
        </el-form-item>
          <el-form-item label="产品单位体积" prop="volume">
          <el-input v-model="formComm.volume" placeholder="请输入产品单位体积" style="width: 240px;" />
        </el-form-item>
          <el-form-item label="计价" prop="price">
          <el-input v-model="formComm.price" placeholder="请输入计价" style="width: 240px;" />
        </el-form-item>
         <el-form-item label="备注" prop="remark">
          <el-input v-model="formComm.remark" placeholder="请输入备注" style="width: 240px;" />
        </el-form-item>


        <!-- <el-form-item label="正唛" prop="frontMark">
           <el-input type="textarea" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.frontMark">
            </el-input>
         </el-form-item>
         <el-form-item label="侧唛" prop="sideMark">
           <el-input type="textarea" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.sideMark"></el-input>
         </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormComm">确 定</el-button>
        <el-button @click="cancelComm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>


  
   <script>
    export default{
    data() {
      return {
        title:null,
         titleComm:null,
        total:0,
        open:false,
        openComm:false,
        form:{},
        formComm:{},
        rules:{},
        rulesComm:{},
        orderNo: '',
        textarea: '',
        input1: '',
        input2: '',
        input3: '',
        orderNo: '',
      showCard: true,
      activeName: 'first',
      orderdata: [{
                customerid: 10086,
                customername: '山东枣庄家具有限公司',
                type: '代理部A区客户',
                areas: '山东',
                attribute: '内销',
                address: '山东枣庄山亭区天河大道1033',
                contacts: '王强',
                response: '张明',
                mobilePhone: '18990908779',
              
                phone: '95557',
                fax: '076989876565',

            }, {
                customerid: "10089",
                customername: '辽宁国际贸易公司',
                type: '代理部B区客户',
                areas: '辽宁',
                attribute: '内销',
                address: '江西省九江市德华路1118号',
                contacts: '李飞飞',
                response: '田洋',
                mobilePhone: '18990979987',
                phone: '95777',
                fax: '076989876095',

            },{
                customerid: "10091",
                customername: 'British Corp Ltd',
                type: '英国代理区客户',
                areas: 'London',
                attribute: '外销',
                address: '221B Baker Street, London, NW1 6XE',
                contacts: 'Contact Officer',
                response: 'Account Manager',
                mobilePhone: '+44 7700 900900',
                phone: '020 7946 0000',
                fax: '+44 20 7946 0001',
            }],

        loading: false,
        dialogVisible: false,
        editForm: {
      //     orderNo: 'DM123456',
       
      //  requestDept: '包装车间',
      //  RequestorderNo: 'QGD1811191879',
      //  requestDate: '2021-01-01',
      //  requestType: '按单采购',
      //  requestman: '业务员A',
      //  requestname: '外箱(WX)',
      //  contractNo: 'OD298765545',
       }, 

        detailedData: [{
          itemid: 'WX-YL15118',
          name: 'YL15118外箱',
          size: '10*10*10',
          material: '密胺',
          conversionrate: '1',
          Delivery: '交期1',
          company:'采购部',      
          company1:'采购部',
          attribute:'磨砂',
          colour:'淡黄色',
          barcode:'17835394733',
          Factoryprice:'20.00',
          costprice:'22.00',
          tax:'9',
          taxprice:'23.98	',
          promotion:'20.00(满10件打9折)',
          promotionstart:'2024 - 01 - 01',
          promotionend:'2024 - 01 - 31',
          number1:'5',
          number2:'20',
          long:'50cm',
          high:'40cm',
          wide:'30cm',
          volume:'0.06m³',
          price:'按个',
          

          remark:'备注1',
        }, {
          itemid: 'CT-YL018716',
          name: '托盘',
          size: '10*10*10',
          material: '密胺',
          conversionrate: '1',
          Delivery: '交期2',      
          company:'采购部',
          attribute:'抛光',
          colour:'纯白色',
          barcode:'82055395767',
          Factoryprice:'18.00',
          costprice:'21.00',
          tax:'9',
          taxprice:'22.63	',
          promotion:'21.03(买五送一)',
          promotionstart:'2024 - 01 - 01',
          promotionend:'2024 - 01 - 31',
          number1:'5',
          number2:'20',
          long:'50cm',
          high:'40cm',
          wide:'30cm',
          volume:'0.06m³',
          price:'按个',
          remark:'备注2',
        },{
          itemid: 'BZ-YL019714',
          name: '圆盘',
          size: '2.5*3.5*2.5',
          material: '材质3',
          conversionrate: '1',
          Delivery: '交期3',      
          company:'采购部',
          attribute:'磨砂',
          colour:'墨绿色',
          barcode:'92359995142',
          Factoryprice:'12.00',
          costprice:'14.00',
          tax:'9',
          taxprice:'16.98	',
          promotion:'15.00(会员专享价)',
          promotionstart:'2024 - 01 - 01',
          promotionend:'2024 - 01 - 31',
          number1:'5',
          number2:'20',
          long:'50cm',
          high:'40cm',
          wide:'30cm',
          volume:'0.06m³',
          price:'按个',
          remark:'备注3',
        }],

        // pickerOptions: {
        //   disabledDate(time) {
        //     return time.getTime() > Date.now();
        //   },
        // },
          // value1: "",
          // value2: "",
        
        defaultProps: {
            children: 'children',
            label: 'label'
        },

        total: 0,
      loading: false,
      radio: 3,
        queryParams:{
          date1: '',
        date2: '',
        radio: 3,
        radio1: 3,
        radio2: 3,
        radio3: 3,
        radio4: 3,
        radio5: 3,
        },
        showSearch: true,
        single: false,
        multiple: false,
        tableData:[],
        customername:'客户公司A',
        mobilePhone:'',
      }
    },
    methods: {
      // 显示高亮
    rowClassName({ row }) {
      return row.mobilePhone == this.mobilePhone ? 'selected-row' : ''; // 判断是否选中
    },
      showTab(row) {
      this.customername = row.customername;
      this.mobilePhone = row.mobilePhone;
      this.showCard = true;
      console.log('Clicked row:', row);
    },
    handleEdit(row) {
      this.currentEditRow = { ...row }; // 深拷贝当前行数据到editForm
      this.open= true; // 或者直接赋值，取决于你是否需要在关闭弹窗时重置表单
      this.dialogVisible = true;
    },
    // handleUpdate() {
    //   // const index = this.orderdata.findIndex(item => item.RequestorderNo === this.currentEditRow.RequestorderNo);
    //   // if (index !== -1) {
    //   //   this.$set(this.orderdata, index, { ...this.editForm }); // 使用$set来确保响应性
    //   // }
    //   // this.dialogVisible = false;
    //   this.open = { ...row };
    //   this.dialogVisible = true;
    // },

    submitForm(){
      this.open = false;
    },
    cancel(){this.open = false;},
    handleQuery() {
      this.loading = false;
    },
      filterNode(value, data) {
          if (!value) return true;
          return data.label.indexOf(value) !== -1;
        },
        handleNodeClick(data){
          console.log(data);
        },
        handleAdd() {
          this.title = '新增'
          this.open = true;
          this.isEdit = false;
        },
         handleAddComm(){
           this.titleComm = '新增客户产品价格明细'
           this.openComm = true;
         },
         handleUpdateComm(row){
            this.titleComm = '编辑客户产品价格明细'
            this.openComm = true;
            this.formComm = row;
          },
    submitFormComm(){
      this.openComm = false;
    },
    cancelComm(){this.openComm = false;},
        handleUpdate(row) {
          this.title = '编辑订单'
          this.open = true;
          this.isEdit = false;
          this.form = row;
        },
        handleDelete(){},
        handleExport(){},
        handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.userId);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
    },
    
   }
   </script>

<style>
.radio-group .el-radio {
  margin-right: 0px;
}

.radio-group {
  border-radius: 1px;
  border: 1px solid #dcdfe6;
}
.selected-row {
  background-color: yellow !important;
  /* 选中行的背景颜色 */
}
</style>
